{% extends "base.html" %}
{% block title %}Kennel Card · {{ app_name }}{% endblock %}
{% block body %}
<h1>🪪 Kennel Card
  <small class="hint">your pup homepage — a link or a QR code away <a class="doc" href="/guide/kennelcard" title="the guide on this">📖</a></small></h1>

<section class="card need" id="before">
  <h2>⚠ Before you share a link</h2>
  <ul>
    <li><b>Anyone with the link can see that view.</b> The link is long and random, so nobody finds it by guessing,
      but links get forwarded and pages get screenshotted. That's not the same as private.</li>
    <li><b>Each view shows only what you tick for it.</b> Nothing is ticked for you. A toy's name and kind go on the
      page when you tick it. Its photos, sizes, price and shop link each need their own tick or field.</li>
    <li><b>Your notes, brands and engravings never go on a page.</b> What strangers read is the blurb you write for
      them, on each item's Kennel Card page.</li>
    <li><b>Think before you show your face.</b> A face plus a distinctive toy, a tattoo or your room can be enough
      to find you.</li>
    <li><b>This box never serves the page.</b> You download the site and host it yourself, so sharing it never
      opens your box to the internet. A page you've published stays up until you publish again or take it down
      where it's hosted.</li>
  </ul>
</section>

<section class="card" id="tag">
  <h2>🏷 Your Tag</h2>
  <form method="post" action="/kennel-card/tag" class="stack">
    <input type="hidden" name="_t" value="{{ form_token('kennelcard.tag') }}">
    <label>Name on the page <input name="name" value="{{ tag.name }}" maxlength="60" placeholder="your pup name"></label>
    <label>Pronouns <input name="pronouns" value="{{ tag.pronouns }}" maxlength="40"></label>
    <label>A few lines about you <textarea name="bio" rows="3" maxlength="{{ text_max }}">{{ tag.bio }}</textarea></label>
    <label>Colour <input type="color" name="accent" value="{{ tag.accent }}"></label>
    <fieldset><legend>Avatar <small class="hint">shown only on views with the Avatar block ticked</small></legend>
      <label class="check"><input type="radio" name="avatar" value="" {{ 'checked' if not tag.avatar }}> none</label>
      <div class="row wrap">
        {%- for m in avatars %}
        <label class="check"><input type="radio" name="avatar" value="{{ m.uid }}" {{ 'checked' if m.uid == tag.avatar }}>
          <img src="/media/{{ m.id }}/thumb" alt="{{ m.kind }} photo" width="64" height="64" loading="lazy"></label>
        {%- else %}<p class="hint">No photos on this box yet.</p>{%- endfor %}
      </div>
    </fieldset>
    <button class="primary">Save</button>
  </form>
</section>

<section class="card" id="leash">
  <h2>🦮 Your Leash <small class="hint">links people can follow — each view shows only the ones you tick for it</small></h2>
  {%- if links %}
  <ul class="plain">
    {%- for ln in links %}
    <li>{{ ln.glyph }} <b>{{ ln.shown }}</b> <small class="hint">{{ ln.url }}</small>
      <form method="post" action="/kennel-card/link/{{ ln.id }}/delete" class="inline">
        <input type="hidden" name="_t" value="{{ form_token('kennelcard.link.delete') }}"><button class="danger small">remove</button></form></li>
    {%- endfor %}
  </ul>
  {%- endif %}
  <form method="post" action="/kennel-card/link" class="row wrap">
    <input type="hidden" name="_t" value="{{ form_token('kennelcard.link') }}">
    <select name="kind">{% for k, (lab, g) in kinds.items() %}<option value="{{ k }}">{{ g }} {{ lab }}</option>{% endfor %}</select>
    <input name="url" placeholder="https://… (or an email address)" required maxlength="500">
    <input name="label" placeholder="label (optional)" maxlength="60">
    <button>Add</button>
  </form>
  <p class="hint">https:// links only. Tracking tags like <code>utm_…</code> and <code>fbclid</code> are stripped when you save.</p>
</section>

<section class="card" id="views">
  <h2>🔗 Views <small class="hint">one link each, each showing what you choose</small></h2>
  {%- if views %}
  <table class="list">
    <thead><tr><th>View</th><th>Shows</th><th></th></tr></thead>
    <tbody>
    {%- for v in views %}
    <tr>
      <td><a href="/kennel-card/view/{{ v.id }}"><b>{{ v.name }}</b></a>{% if v.url %}<br><small class="hint">{{ v.url }}</small>{% endif %}</td>
      <td>{% for b in v.blocks_l %}{{ blocks[b][0] }} {% endfor %}
        <small class="hint">{{ v.counts.links }} links · {{ v.counts.toybox }} in the toy box · {{ v.counts.wishlist }} wishes · {{ v.counts.photos }} photos</small></td>
      <td><a href="/kennel-card/view/{{ v.id }}/preview/" target="_blank" rel="noopener">preview ↗</a></td>
    </tr>
    {%- endfor %}
    </tbody>
  </table>
  {%- else %}<p class="hint">No views yet. Make one for each group you share with: a public one for your bio, say,
    and a fuller one for friends.</p>{%- endif %}
  <form method="post" action="/kennel-card/view" class="row">
    <input type="hidden" name="_t" value="{{ form_token('kennelcard.view.new') }}">
    <input name="name" placeholder="a name only you see — “Public”, “Friends”" required maxlength="60">
    <button>New view</button>
  </form>
  {%- if not kit_on %}<p class="hint">The Kit module is off, so there's no Toy box or Wishlist to show.</p>{% endif %}
</section>

<section class="card" id="where">
  <h2>📦 Publish</h2>
  <p>Download the whole site (every view) and put it on any static host. Unzip it at the host's root: each view
    lives at <code>/k/&lt;its link&gt;/</code>, and a <code>robots.txt</code> asks search engines to stay out.
    Publishing again replaces it, so a deleted view or an old link stops working.</p>
  <p><a class="btn primary" href="/kennel-card/site.zip">⬇ Download the site</a></p>
  <form method="post" action="/kennel-card/where" class="row wrap">
    <input type="hidden" name="_t" value="{{ form_token('kennelcard.where') }}">
    <label>Where it will live <input type="url" name="base_url" value="{{ base_url }}" placeholder="https://… (your static host)"></label>
    <button>Save</button>
  </form>
  <p class="hint">Optional. Set it and each view gets its full link and a QR code, here and in the download.</p>
</section>
{% endblock %}